<template>
	<view class="container">
		<view class="photo-container" v-if="!show">
			<view>
				<text v-if="!imageData">未添加图片</text>
				<image mode="aspectFit" v-if="imageData" :src="imageData" width="300rpx" />
			</view>
			<button class="btn" @click="clickHandler">签字</button>
		</view>

		<view class="canvas-container" v-show="show">
			<canvas canvas-id="canvas" class="sign-canvas" @touchstart="mousedownHandler" @touchmove="mousemoveHandler"
			 @touchend="mouseupHandler" @touchcancel="mouseupHandler"></canvas>

			<view class="btn-group">
				<button class="btn" @click="saveHandler">保存</button>
				<button class="btn" @click="cancelHandler">清空</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				control: false,
				ctx: null,
				imageData: ''
			}
		},
		methods: {
			clickHandler() {
				this.show = true
			},
			initCanvas() {
				const ctx = uni.createCanvasContext('canvas', this)
				// 画笔颜色
				ctx.setStrokeStyle("#000")
				//  画笔粗细
				ctx.setLineWidth(5)
				this.ctx = ctx
			},
			mousedownHandler(e) {
				this.control = true
				let touches = e.touches
				if (!!touches && touches.length > 0) {
					let touche = touches[0]
					if (!!touche.x && !!touche.y) {
						this.ctx.moveTo(touche.x, touche.y)
					}
				}
			},
			mouseupHandler() {
				this.control = false
				this.ctx.draw(true)
			},
			mousemoveHandler(e) {
				if (this.control) {
					let touches = e.touches
					if (!!touches && touches.length > 0) {
						let touche = touches[0]
						if (!!touche.x && !!touche.y) {
							// 终止位置
							this.ctx.lineTo(touche.x, touche.y)
							// 结束图形
							this.ctx.stroke()
						}
					}
				}
			},
			saveHandler() {
				const that = this

				// springboot 
				// 1. 客户端（pc,h5,app，小程序） 上传图片 ，返回图片的唯一标识
				// 2. 查看图片的时候，通过图片的唯一标识，将图片的base64字符串返回到客户端
				uni.canvasToTempFilePath({
					canvasId: 'canvas',
					success(res) {
						// that.imageData = res.tempFilePath
						that.show = false
						that.uploadToServer(res.tempFilePath)
					}
				})
			},
			uploadToServer(imageData) {
				// uni.request({
				// 	url: 'http://127.0.0.1:7180/upload',
				// 	method: 'POST',
				// 	data: {
				// 		imageData: imageData
				// 	},
				// 	success: (res) => {
				// 		this.viewImageFromServer(res.data)
				// 	},
				// 	fail(e) {
				// 		console.log(e)
				// 	}
				// })
				console.log(imageData)
				this.viewImageFromServer('4cddd990-d224-452d-8320-43d830773559')
			},
			viewImageFromServer(currentFileName) {
				uni.request({
					url: 'http://127.0.0.1:7180/view/' + currentFileName,
					method: 'GET',
					success: (res) => {
						this.imageData = res.data
						console.log(res.data)
					},
					fail(e) {
						console.log(e)
					}
				})
			},
			cancelHandler() {
				this.ctx.draw()
			},
		},
		onReady() {
			this.initCanvas()
		}
	}
</script>

<style scoped>
	.container {
		width: 100vw;
		height: 100vh;
		display: flex;
		flex-flow: column nowrap;
		justify-content: center;
		align-items: center;
		overflow: hidden;
	}

	.photo-container {
		width: 100vw;
		height: 100vh;
		display: flex;
		flex-flow: column nowrap;
		justify-content: center;
		align-items: center;
	}

	.btn {
		width: 200rpx;
		height: 70rpx;
	}

	.canvas-container {
		border: 1rpx solid #42b983;
		width: 100vw;
		height: 100vh;
		display: flex;
		flex-flow: column nowrap;
		align-items: center;
		align-content: center;
		position: relative;
	}

	.btn-group {
		width: 100vw;
		height: 100rpx;
		display: flex;
		flex-flow: row nowrap;
		justify-content: center;
		align-items: center;
		align-content: center;
		position: absolute;
		bottom: 0;
		border-top: 1rpx solid #42b983;
	}

	.sign-canvas {
		width: 100vw;
		height: calc(100vh - 100rpx);
	}
</style>
